<template>
	<view class="page" :class="{gold: aiList.length > 0 && isGpt4(activeAiIndex)}">
		<uv-tabs class="tabs" :list="aiList" :current="activeAiIndex" @click="onTabChange" key-name="alias" line-color="#04BABE" :activeStyle="{ color: '#1b1b1b', fontWeight: 'bold', fontSize: '15px'}" :inactiveStyle="{ color: '#1b1c1c', fontSize: '14px'}"></uv-tabs>

		<swiper class="lists" :current="activeAiIndex" :duration="300" @change="onSwiperChange">
			<swiper-item class="swiper-item" v-for="(item, index) in aiList" :key="index">
				<chatMsgList ref="chatMsgList" :ai-name="item.name" :ai-index="index" :active-ai-index="activeAiIndex" :welcome="welcome" :user-avatar="userAvatar" :ai-avatar="aiAvatar" @setMessage="setMessage"></chatMsgList>
			</swiper-item>
		</swiper>

		<view class="box-input no-speech">
			<view class="tools">

			</view>
			<view class="input">
				<textarea type="text" v-model="message" confirm-type="send" @confirm="sendConfirm" :auto-height="true" :placeholder="'输入你的问题' | lang" maxlength="-1" cursor-spacing="0"></textarea>
				<button class="btn-send" @tap="sendText">
					<image mode="widthFix" src="/static/images/ic_send.png"></image>
				</button>
			</view>
		</view>

		<notice v-if="notice" :notice="notice"></notice>
	</view>
</template>

<script>
	const app = getApp();

	export default {
		data() {
			return {
				isLogin: false,
				siteroot: '',
				message: '',
				scrollTop: 0,
				page_title: '',
				chatSetting: {},
				balance_model4: 0,
				model4Name: '',
				userinfo: {},
				aiList: [],
				activeAiIndex: 0,
				notice: null
			};
		},
		computed: {
			welcome() {
				let title = this.page_title
				let desc = ''
				let tips = this.chatSetting.tips
				if (!this.chatSetting.welcome && !this.chatSetting.tips) {
					desc = this.$lang('请输入你的问题')
				} else {
					desc = this.chatSetting.welcome
				}
				return {
					title: title,
					desc: desc,
					tips: tips
				}
			},
			userAvatar() {
				if (this.userinfo && this.userinfo.avatar) {
					return this.userinfo.avatar
				} else {
					return '/static/img/ic_user.png'
				}
			},
			aiAvatar() {
				return '/static/img/ic_ai.png'
			}
		},
		watch: {
			message() {
			  uni.setStorageSync('chatPrompt', this.message)
			}
		},
		onLoad(options) {
			let tuid = 0
			let search = window.location.search
			if (search && search.indexOf('tuid=') != -1) {
				search = search.split('tuid=')[1]
				tuid = parseInt(search)
				if (tuid) {
					uni.setStorageSync('tuid', tuid);
				}
			}

			app.globalData.util.getSetting().then(setting => {
				this.setData({
					page_title: setting.page_title,
					hasModel4: setting.hasModel4,
					model4Name: setting.model4Name
				})
				uni.setNavigationBarTitle({
					title: setting.page_title
				})
				this.setData({
					siteroot: app.globalData.siteroot.replace('/web.php', ''),
					aiList: setting.aiList
				})
				const ai = uni.getStorageSync('ai')
				if (ai) {
					setting.aiList.forEach((item, index) => {
						if (item.name === ai) {
							this.switchAi(index)
						}
					})
				}
			})

			this.getChatSetting()

			app.globalData.util.checkLogin().then(() => {
				this.setData({
					isLogin: true
				})
				this.getUserInfo()
			})

			setTimeout(() => {
				this.getNotice()
			}, 2000)

			// 自动填充内容
			if (options.prompt) {
			  this.message = decodeURIComponent(options.prompt)
			} else {
			  var prompt = uni.getStorageSync('chatPrompt')
			  if (prompt) {
				this.message = prompt
			  }
			}
		},
		methods: {
			sendText() {
				this.$refs.chatMsgList[this.activeAiIndex].sendText(this.message)
			},
			sendConfirm() {
				setTimeout(() => {
					this.sendText()
				}, 50)
			},
			setMessage(message) {
				this.message = message
			},
			quickMessage(text) {
				this.message = text
			},
			getChatSetting() {
				app.globalData.util
					.request({
						url: '/chat/getChatSetting'
					})
					.then((res) => {
						this.setData({
							chatSetting: res.data
						});
					});
			},
			getUserInfo() {
				app.globalData.util
					.request({
						url: '/user/info',
						loading: false
					})
					.then((res) => {
						this.setData({
							userinfo: res.data
						});
					}).catch(res => {

					})
			},
			onTabChange(item) {
				this.switchAi(item.index)
			},
			onSwiperChange(e) {
				let index = e.target.current || e.detail.current
				this.switchAi(index)
			},
			switchAi(index) {
				if (this.isGpt4(index)) {
					app.globalData.util.message(window.langTrans('已进入【' + this.model4Name +'】'))
				}
				this.activeAiIndex = index
				uni.setStorage('ai', this.aiList[index].name)
			},
			isGpt4(index) {
				const name = this.aiList[index].name
        return app.globalData.util.isGpt4(name)
			},
			getNotice() {
				app.globalData.util
					.request({
						url: '/login/getNotice',
						data: {
							platform: 'h5'
						},
						loading: false
					}).then(res => {
						this.notice = res.data
					})
			}
		}
	};
</script>
<style lang="scss">
	.page {
		// background: #f7f7f8;
		position: absolute;
		width: 100%;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		overflow: hidden;

		.tabs {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 88rpx;
			// background: #fff;
		}

		.lists {
			position: absolute;
			left: 0;
			right: 0;
			top: 94rpx;
			bottom: 160rpx;
			width: 100%;
			height: auto;
		}

		.box-input {
			width: 100%;
			padding: 30rpx 30rpx;
			position: absolute;
			left: 0;
			bottom: 0;
			border-top: 1px solid #eee;
			background: #fff;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;

			.tools {
			    display: flex;
			    justify-content: space-between;
			    align-items: flex-end;
				.btn-tool {
				    width: 80rpx;
				    height: 80rpx;
				    padding: 0;
				    border: none;
				    border-radius: 40rpx;
				    background: none;
				    display: flex;
				    align-items: center;
				    justify-content: center;
				    background: #fff;
				    border: 4rpx solid #dae0e0;
				    margin-right: 20rpx;

					image {
					    width: 48rpx;
					    height: 48rpx;
					}
				}
			}

			.input {
				width: 600rpx;
				padding: 0;
				position: relative;
				box-sizing: border-box;
				overflow: hidden;
				display: flex;
				align-items: flex-end;
				justify-content: space-between;

				textarea {
					width: 500rpx;
					padding: 18rpx 10rpx 18rpx 24rpx;
					line-height: 40rpx;
					max-height: 800rpx;
					overflow-x: hidden;
					overflow-y: auto;
					color: #4c4d52;
					border: 4rpx solid #03b9bd;
					border-radius: 40rpx;
					background: #f6ffff;
					font-size: 28rpx;
				}

				.input-audio {
				    border: 4rpx solid #03b9bd;
				    border-radius: 40rpx;
				    background: #f6ffff;
				    color: #4c4d52;
				    width: 100%;
				    height: 80rpx;
				    line-height: 80rpx;
				    box-sizing: border-box;
				    text-align: center;
				}

				.btn-send {
					width: 80rpx;
					height: 80rpx;
					padding: 0;
					border: none;
					background: none;
					display: flex;
					align-items: center;
					justify-content: center;
					z-index: 9;
					margin-left: 20rpx;

					image {
						width: 100%;
					}

					&::after {
						display: none;
					}

				}
			}
		}

		.no-speech {
			.input {
				width: 690rpx;
				margin-left: 0;

				textarea {
					width: 590rpx;
				}
			}
		}
	}
	.gold {
		.box-input {
			.input {
				textarea {
					border-color:#ffa41a;
				}
			}
		}
	}


	.account {
		margin: 20rpx 30rpx;
		padding: 16rpx 24rpx 16rpx 24rpx;
		box-sizing: border-box;
		/* background: #f3f6f9; */
		border-radius: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.account .balance {
		color: #666;
		font-size: 24rpx;
	}

	.account .balance text {
		color: #04BABE;
		margin-right: 6rpx;
	}

	.account .btn-pay {
		display: inline-block;
		color: #04BABE;
		margin-left: 20rpx;
		font-size: 24rpx;
	}
</style>
